import { useState, useCallback } from 'react';
import { useLocalStorage } from './useLocalStorage';
import { GridConfig } from '../types/chartTypes';
import { message } from 'antd';

/**
 * 默认网格预设样式 - 与实际ECharts格式完全一致
 */
const DEFAULT_PRESETS: Record<string, GridConfig> = {
    '标准布局': {
        show: false,
        left: '10%',
        right: '10%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    '宽屏布局': {
        show: false,
        left: '5%',
        right: '5%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    '紧凑布局': {
        show: false,
        left: '3%',
        right: '3%',
        top: '30',
        bottom: '30',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    '居中布局': {
        show: false,
        left: 'center',
        top: 'middle',
        containLabel: true,
        width: '80%',
        height: '80%',
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    '左侧留白': {
        show: false,
        left: '20%',
        right: '5%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    '右侧留白': {
        show: false,
        left: '5%',
        right: '20%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    '带边框': {
        show: true,
        left: '10%',
        right: '10%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderColor: '#ccc',
        borderWidth: 1
    },
    '灰色背景': {
        show: true,
        left: '10%',
        right: '10%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: '#f5f5f5',
        borderWidth: 0
    },
    '圆角背景': {
        show: true,
        left: '10%',
        right: '10%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'rgba(250, 250, 250, 0.8)',
        borderRadius: 8,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
        shadowOffsetY: 5
    },
    '卡片式': {
        show: true,
        left: '5%',
        right: '5%',
        top: '50',
        bottom: '50',
        containLabel: true,
        backgroundColor: '#fff',
        borderRadius: 4,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 5,
        shadowOffsetY: 2,
        z: 1
    },
    '浅色底纹': {
        show: true,
        left: '10%',
        right: '10%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'rgba(240, 240, 245, 0.6)',
        borderRadius: 4,
        borderColor: '#eee',
        borderWidth: 1
    },
    '暗色主题': {
        show: true,
        left: '10%',
        right: '10%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'rgba(50, 50, 50, 0.7)',
        borderColor: '#444',
        borderWidth: 1,
        shadowColor: 'rgba(0, 0, 0, 0.3)',
        shadowBlur: 10
    },
    '移动端优化': {
        show: false,
        left: 5,
        right: 5,
        top: 40,
        bottom: 5,
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    '报表风格': {
        show: true,
        left: '5%',
        right: '5%',
        top: '50',
        bottom: '50',
        containLabel: true,
        backgroundColor: '#fafafa',
        borderColor: '#e0e0e0',
        borderWidth: 1
    },
    '仪表盘': {
        show: false,
        left: 'center',
        top: 'middle',
        containLabel: false,
        width: '90%',
        height: '90%',
        backgroundColor: 'transparent',
        borderWidth: 0
    },
    // 3D图表特有预设
    '3D标准': {
        show: false,
        left: '10%',
        right: '10%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0,
        boxWidth: 200,
        boxDepth: 80,
        boxHeight: 100
    },
    '3D宽屏': {
        show: false,
        left: '5%',
        right: '5%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0,
        boxWidth: 300,
        boxDepth: 100,
        boxHeight: 120
    },
    '3D紧凑': {
        show: false,
        left: '12%',
        right: '12%',
        top: '60',
        bottom: '60',
        containLabel: true,
        backgroundColor: 'transparent',
        borderWidth: 0,
        boxWidth: 150,
        boxDepth: 60,
        boxHeight: 80
    }
};

export interface GridPreset {
    name: string;
    config: GridConfig;
    isDefault: boolean;
}

/**
 * 网格预设钩子
 * 提供预设管理功能
 */
export function useGridPresets() {
    // 使用localStorage存储用户自定义预设
    const [userPresets, setUserPresets] = useLocalStorage<Record<string, GridConfig>>('echarts-grid-presets', {});

    // 合并默认预设和用户预设
    const allPresets = useState(() => {
        const merged: GridPreset[] = [];

        // 添加默认预设
        for (const name in DEFAULT_PRESETS) {
            merged.push({
                name,
                config: DEFAULT_PRESETS[name],
                isDefault: true
            });
        }

        // 添加用户预设
        for (const name in userPresets) {
            merged.push({
                name,
                config: userPresets[name],
                isDefault: false
            });
        }

        return merged;
    })[0];

    // 保存为新预设
    const saveAsPreset = useCallback((name: string, config: GridConfig) => {
        // 检查名称是否已存在于默认预设中
        if (DEFAULT_PRESETS[name]) {
            message.error(`预设名称 "${name}" 已存在于默认预设中，请使用其他名称`);
            return false;
        }

        // 更新用户预设
        setUserPresets(prev => ({
            ...prev,
            [name]: config
        }));

        message.success(`已保存预设 "${name}"`);
        return true;
    }, [setUserPresets]);

    // 删除预设
    const deletePreset = useCallback((name: string) => {
        // 检查是否为默认预设
        if (DEFAULT_PRESETS[name]) {
            message.error('无法删除默认预设');
            return false;
        }

        // 更新用户预设，移除指定预设
        setUserPresets(prev => {
            const updated = { ...prev };
            delete updated[name];
            return updated;
        });

        message.success(`已删除预设 "${name}"`);
        return true;
    }, [setUserPresets]);

    return {
        allPresets,
        saveAsPreset,
        deletePreset
    };
}